@page
@{ Layout = "_Layout"; }
@section Styles{
  <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
  <link href="/sitefiles/assets/css/xblms.min.css" rel="stylesheet" type="text/css" />
  <style>
        .nav-link{
            line-height:88px;
        }
        </style>
}

<el-card style="margin: 10px;">
  <div slot="header">
    <span>数据库升级向导</span>
  </div>

  <div class="m-t-20">

      <div v-if="pageType === 'prepare'">

        <ul class="nav nav-pills nav-fill bg-muted m-b-20">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">升级准备</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级数据库</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级完成</a>
          </li>
        </ul>

        <div class="jumbotron text-center">
          <p>
            该功能将逐一检查数据库表及字段，并将数据库结构更新至最新
          </p>
          <p class="mt-3 text-warning">
              当前版本：v{{databaseVersion}}
          </p>
          <p class="text-warning">
              升级版本：v{{version}}
          </p>
        </div>

        <hr />

        <div class="text-center">
                <el-button type="primary" v-on:click="btnStartClick">开始升级</el-button>
                <el-button v-on:click="btnBackClick">返 回</el-button>
        </div>
      </div>

      <div v-if="pageType === 'update'">
        <ul class="nav nav-pills nav-fill bg-muted m-b-20">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级准备</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">升级数据库</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级完成</a>
          </li>
        </ul>

        <div class="jumbotron text-center">
          <img class="mt-3" src="/sitefiles/assets/images/loading.gif" />
          <br />
          <br />
          <p class="lead">正在升级数据库，请稍后...</p>
        </div>
      </div>

      <div v-if="pageType === 'done'">
        <ul class="nav nav-pills nav-fill bg-muted m-b-20">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级准备</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级数据库</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">升级完成</a>
          </li>
        </ul>

        <div class="jumbotron text-center">
          <h4>数据库升级完成！</h4>
          <p class="mt-3">
            <el-divider></el-divider>
            <el-link type="success" :href="utils.getIndexUrl()">进入后台管理</el-link>
          </p>
          <hr>
        </div>
      </div>

  </div>

</el-card>

@section Scripts{
<script src="/sitefiles/assets/js/admin/syncDatabase.js" type="text/javascript"></script> }